<script setup></script>

<template>
  <router-view></router-view>
  <van-tabbar route v-model="active" v-if="$route.meta.showTabbar">
    <van-tabbar-item replace :to="item.path" v-for="item,index in tabbar" :key="index">
    <span>{{item.text}}</span>
    <template #icon="props">
      <img :src="props.active ? item.iconActive : item.icon" />
    </template>
    </van-tabbar-item>
    <!-- <van-tabbar-item replace to="/my" icon="contact-o">我的</van-tabbar-item> -->
  </van-tabbar>
</template>
<script setup>
import icon1_active from '@/assets/images/home/icon_tabbar_workstation_normal.png'
import icon1_default from '@/assets/images/home/icon_tabbar_workstation_default.png'
import icon2_active from '@/assets/images/home/icon_tabbar_task_normal.png'
import icon2_default from '@/assets/images/home/icon_tabbar_task_default.png'
import icon3_active from '@/assets/images/home/icon_tabbar_mytask_normal.png'
import icon3_default from '@/assets/images/home/icon_tabbar_mytask_default.png'
import icon4_active from '@/assets/images/home/icon_tabbar_me_normal.png'
import icon4_default from '@/assets/images/home/icon_tabbar_me_default.png'
import { ref } from "vue";
const active = ref("");
const tabbar = ref([
  {
    icon: icon1_default,
    iconActive: icon1_active,
    text: "工作台",
    path: "/workStation",
  },
  {
    icon: icon2_default,
    iconActive: icon2_active,
    text: "事件任务",
    path: "/task",
  },
  {
    icon: icon3_default,
    iconActive: icon3_active,  
    text: "工单",
    path: "/home",
  },
    {
    icon: icon4_default,
    iconActive: icon4_active,  
    text: "我的",
    path: "/me",
  }
])
</script>
<style>
#app,
body,
html {
  width: 100%;
  height: 100%;
  font-size: 12px;

}

:root {
  --van-tabbar-item-text-color: rgba(0, 0, 0, 0.40) !important;
}

</style>
